@import "common.less";


.personal-r{
  min-height: 720px;
  .layui-tab {
    margin: 0;
    .fun-title {
      padding: 30px 0 0 60px;
      height: 144px;
      background-color: #fff;
      box-shadow: 0 12px 16px -3px rgba(82, 94, 140, 0.10);
      border-radius: 8px;
      z-index: 9990;
      .fun-title-s {
        font-size: 26px;
        color: #4A4A4A;
        letter-spacing: 0;
        line-height: 26px;
      }
      .layui-tab-title {
        margin-top: 24px;
        border-bottom: none;
        li {
          margin-right: 74px;
          padding: 0;
          font-size: 16px;
          color: #4A4A4A;
          border: none;
        }
        .layui-this {
          border: none;
          color: #2F5AFF;
          &:after {
            border-width: 0;
            border-bottom: 2px solid #2F5AFF;
          }
        }
      }
    }
    .layui-tab-content {
      border-radius: 8px;
      width: 878px;
      padding: 30px 0 0 60px;
      .layui-tab-item{
        .ord-statis{
          font-size: 14px;
          color: #9B9B9B;
          margin-bottom: 20px;
          i{
            font-style: normal;
          }
        }
        .orders{
          .order-list{
            .order{
              width: 814px;
              height: 210px;
              border: 1px solid #EEEEEE;
              border-radius: 7.5px;
              margin-bottom: 20px;
              &:hover{
                border: 1px solid #DAE0FD;
                box-shadow: 0 2px 4px 0 #DAE0FD;
              }
              .o-top{
                width: 100%;
                height: 43px;
                border-bottom:1px solid #eee;
                .o-date{
                  float: left;
                  margin-left: 20px;
                  height: 100%;
                  line-height: 43px;
                  font-size: 14px;
                  color: #9B9B9B;
                  p{
                    display: inline-block;
                  }
                }
                .order-num{
                  float: left;
                  display: inline-block;
                  margin-left: 44px;
                  line-height: 43px;
                  font-size: 14px;
                  color: #9B9B9B;
                }
                .o-status{
                  float: right;
                  margin-right: 14px;
                  font-size: 14px;
                  color: #94A5FA;
                  line-height: 43px;
                }
              }
              .o-bottom{
                border-radius: 8px;
                width: 100%;
                height: 165px;
                background-color: #fff;
                .ord-cover{
                  float: left;
                  display: inline-block;
                  width: 224px;
                  height: 126px;
                  border-radius: 8px;
                  margin:19px 0 0 20px;
                  overflow: hidden;
                  img{
                    width: 100%;
                    height: 100%;
                  }
                }
                .ord-intro{
                  margin:20px 0 0 20px;
                  float: left;
                  .ord-title{
                    margin-top: 11px;
                    width: 232px;
                    display: block;
                    font-size: 16px;
                    color: #4A4A4A;
                    line-height:22px;
                    margin-bottom: 10px;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                    -webkit-line-clamp: 2; /** 显示的行数 **/
                    overflow: hidden;
                  }
                  .buyer{
                    font-size: 14px;
                    color: #9B9B9B;
                    i{
                      font-style: normal;
                    }
                  }
                }
                .ord-cost{
                  float: left;
                  width: 154px;
                  padding: 62px 0 0 34px;
                  border-left: 1px solid #EEEEEE;
                  border-right: 1px solid #EEEEEE;
                  height: 165px;
                  align-items: center;
                  font-size: 14px;
                  color: #6E6E6E;
                  line-height:20px;
                  margin-left: 20px;
                  p{
                    color: #ffc00b;
                  }
                }
                .ord-fun{
                  position: relative;
                  padding: 60px 0 0 0;
                  width: 142px;
                  height: 165px;
                  float: left;
                  a{
                    text-align: center;
                    display: block;
                    width: 100%;
                    text-decoration: none;
                    margin-bottom: 15px;
                    &:hover{
                      color:#2F5AFF;
                    }
                  }
                  &:hover{
                    .ord-part{
                      display: block;
                    }
                  }
                  .ord-part{
                    display: none;
                    z-index: 1000;
                    padding: 31px 0  0 40px;
                    position: absolute;
                    right: 0;
                    bottom: -210px;
                    width: 325px;
                    height: 210px;
                    background: #F7F8FF;
                    box-shadow: 0 4px 6px 2px rgba(0,0,0,0.10);
                    border-radius: 8px;
                    ul{
                      float: left;
                    }
                    .name-list{
                      width: 56px;
                      li{
                        margin-bottom: 15px;
                        color: #4A4A4A;
                        font-size: 14px;
                      }
                    }
                    .deteils-list{
                      margin-left: 15px;
                      li{
                        line-height: 19px;
                        font-size: 14px;
                        color: #9B9B9B;
                        margin-bottom: 15px;
                        a{
                          font-style: normal;
                        }
                      }
                    }
                  }

                }
                .nicht{
                  padding: 46px 0 0 0;
                  .pay-now{
                    color: #2F5AFF;
                  }
                }
                .refund{
                  padding-top:70px;
                }
              }
            }
          }
          #laypage-f,#laypage-s,#laypage-t{
            .layui-laypage{
              clear: both;
              margin: 10px 0 10px 230px;
              a,span{
                overflow: hidden;
                color: #999999;
                text-align: center;
                padding: 0;
                width: 31px;
                height: 31px;
                background: #F8F9FB;
                border-radius: 8px;
                margin-right: 20px;
              }
            }
          }
        }

      }
    }
  }
}